<template>
  <div>
    <div :id="id" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
    props:{
        id:{
            type:String,
            require:true
        },
        xdata:{
            type:Array,
            required:true
        },
        ydata:{
            type:Array,
            required:true
        }
    },
    mounted() {
        var chartDom = document.getElementById(this.id)
        var myChart = echarts.init(chartDom)
        var option

        option = {
            title:{
                text:'近七日销售总量统计',
                x:'center',
                top:'20'
            },
        xAxis: {
            type: 'category',
            data: this.xdata
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
            data: this.ydata,
            type: 'line',
            color:'#d9a7c7'
            }
        ]
        }

        option && myChart.setOption(option)
    }
}
</script>

<style lang="scss" scoped>
</style>